<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="details(item.id)"
      >
        <div class="t-img">
          <img :src="item.scene_pic_url" alt="" />
        </div>
        <div class="info">
          <p class="title">{{ item.title }}</p>
          <p class="subtitle">{{ item.subtitle }}</p>
          <p class="price">{{ item.price_info }}元起</p>
        </div>
      </div>
    </van-list>
    <tab></tab>
  </div>
</template>

<script>
import { listaction } from "@/api/topic";
import tab from "../all/rt.vue";

export default {
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      start: 1,
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    onLoad() {
      this.init();
    },
    init() {
      listaction({
        page: this.start,
      }).then((res) => {
        console.log(res);
        this.list.push(...res.data);
        this.start++;
        if (this.start > res.total) {
          this.finished = true;
        }
        this.loading = false;
      });
    },
    details(id) {
      // console.log(id);
      this.$router.push({ path: "/topic/details", query: { ids: id } });
    },
  },
  components: {
    tab: tab,
  },
};
</script>

<style lang="scss" scoped>
.item {
  background: #fff;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  .t-img {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    color: #333;
    font-size: 16px;
    margin-top: 15px;
  }
  .subtitle {
    color: #999;
    font-size: 0.32rem;
    margin-top: 0.21333rem;
    padding: 0 0.26667rem;
  }
  .price {
    color: #b4282d;
    font-size: 0.36rem;
    margin-top: 0.26667rem;
  }
}
</style>
